import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface RadarProps {
    chartId?: string;
    width?: string;
    height?: string;
    title?: object;
    legend?: string[];
    radarIndicator?: any[];
    seriesName?: string;
    seriesData?: any[];
}

@customElement('lit-radar')
export class LitRadar extends LitElement {
    @property({type: String}) chartId: string = 'lit-radar-chart';
    @property({type: String}) width: string = '600px';
    @property({type: String}) height: string = '400px';
    @property({type: Object}) title: any = {};
    @property({type: Array}) legend: string[] = [];
    @property({type: Array}) radarIndicator: any[] = [];
    @property({type: String}) seriesName: string = '';
    @property({type: Array}) seriesData: any[] = [];

    getSeries(): any[] {
        return [{
            name: this.seriesName,
            type: 'radar',
            data: this.seriesData.map((item, index) => ({
                value: item,
                name: this.legend[index],
            }))
        }]
    }

    option: echarts.EChartsOption = {
        title: this.title,
        legend: {
            data: this.legend,
        },
        radar: {
            indicator: this.radarIndicator,
        },
        series: this.getSeries(),
    };

    static styles = style;

    updated(): void {
        (this.option.title as any) = this.title;
        (this.option.legend as any).data = this.legend;
        (this.option.radar as any).indicator = this.radarIndicator;
        this.option.series = this.getSeries();
        this.firstUpdated();
    }
    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }
    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width:${this.width}; height:${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-radar': LitRadar;
    }
}